<template>
     <div class="app-container">
        <el-tabs type="border-card" class="demo-tabs">
            <!-- 网站信息 -->
            <el-tab-pane>
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Platform />
                        </el-icon>
                        <span>网站信息</span>
                    </span>
                </template>
                <el-form label-width="80px" :model="siteConfig" label-position="left">
                    <el-row>
                        <el-col :md="5">
                            <el-form-item label="用户头像">
                                <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                                            :show-file-list="false" accept="image/*" :before-upload="beforeUpload" :on-progress="handleProgress"
                                            :on-success="handleUserAvatarSuccess">
                                        <img v-if="siteConfig.userAvatar" :src="siteConfig.userAvatar" class="avatar" />
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-progress v-if="progressFlag" :percentage="uploadPercentage"></el-progress>
                            </el-form-item>
                        </el-col>
                        <el-col :md="5">
                            <el-form-item label="游客头像">
                                <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload" :on-progress="handleProgress2"
                                    :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                                    :on-success="handleTouristAvatarSuccess">
                                        <img v-if="siteConfig.touristAvatar" :src="siteConfig.touristAvatar" class="avatar" />
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-progress v-if="progressFlag2" :percentage="uploadPercentage2"></el-progress>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="网站名称">
                        <el-input v-model="siteConfig.siteName" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="网站地址">
                        <el-input v-model="siteConfig.siteAddress" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="网站简介">
                        <el-input v-model="siteConfig.siteIntro" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="网站公告">
                        <el-input style="width: 400px;" v-model="siteConfig.siteNotice"
                            :autosize="{ minRows: 4, maxRows: 5 }" resize="none" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="建站日期">
                        <el-date-picker v-model="siteConfig.createSiteTime" value-format="YYYY-MM-DD" type="date"
                            placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="备案号">
                        <el-input v-model="siteConfig.recordNumber" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdate">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 作者信息 -->
            <el-tab-pane label="author">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Flag />
                        </el-icon>
                        <span>作者信息</span>
                    </span>
                </template>
                <el-form label-width="80px" :model="siteConfig" label-position="left">
                    <el-form-item label="作者头像">
                        <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                            :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                            :on-success="handleAuthorAvatarSuccess">
                            <img v-if="siteConfig.authorAvatar" :src="siteConfig.authorAvatar" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="网站作者">
                        <el-input v-model="siteConfig.siteAuthor" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="关于我">
                        <v-md-editor v-model="siteConfig.aboutMe" :disabled-menus="[]" :left-toolbar="toolList"
                            @upload-image="handleUploadImage" height="400px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdate">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 社交信息 -->
            <el-tab-pane label="social">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Opportunity />
                        </el-icon>
                        <span>社交信息</span>
                    </span>
                </template>
                <el-form label-width="70px" :model="siteConfig" label-position="left">
                    <el-row>
                    <el-col :md="4">
                        <el-form-item label-width="85" label="微信二维码">
                            <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                                        :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                                        :on-success="handleWeiXinCodeSuccess">
                                    <img v-if="siteConfig.weiXinCode" :src="siteConfig.weiXinCode" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4">
                        <el-form-item  label-width="85"  label="QQ二维码">
                            <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                                        :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                                        :on-success="handleQQCodeSuccess">
                                    <img v-if="siteConfig.qqCode" :src="siteConfig.qqCode" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4">
                        <el-form-item  label-width="85"  label="抖音二维码">
                            <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                                        :show-file-list="false" accept="image/*" :before-upload="beforeUpload" 
                                        :on-success="handleTiktokSuccess">
                                    <img v-if="siteConfig.douYinCode" :src="siteConfig.douYinCode" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-checkbox-group v-model="socialList">
                        <el-form-item label="Github">
                            <el-input v-model="siteConfig.github" style="width: 400px; margin-right: 1rem"></el-input>
                            <!-- <el-checkbox label="github">是否展示</el-checkbox> -->
                        </el-form-item>
                        <el-form-item label="Gitee">
                            <el-input v-model="siteConfig.gitee" style="width: 400px; margin-right: 1rem"></el-input>
                            <!-- <el-checkbox label="gitee">是否展示</el-checkbox> -->
                        </el-form-item>
                        <el-form-item label="BiliBili">
                            <el-input v-model="siteConfig.bilibili" style="width: 400px; margin-right: 1rem"></el-input>
                            <!-- <el-checkbox label="bilibili">是否展示</el-checkbox> -->
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleUpdate">保 存</el-button>
                        </el-form-item>
                    </el-checkbox-group>
                </el-form>
            </el-tab-pane>
            <!-- 审核&打赏 -->
            <el-tab-pane label="check">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Stamp />
                        </el-icon>
                        <span>审核</span>
                    </span>
                </template>
                <el-form label-width="100px" :model="siteConfig" label-position="left">
                    <el-form-item label="评论审核">
                        <el-radio-group v-model="siteConfig.commentCheck">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="留言审核">
                        <el-radio-group v-model="siteConfig.messageCheck">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdate">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 其他设置 -->
            <el-tab-pane label="other">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Briefcase />
                        </el-icon>
                        <span>其他设置</span>
                    </span>
                </template>
                <el-form label-width="100px" :model="siteConfig" label-position="left">
                    <el-form-item label="文章默认封面">
                        <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                            :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                            :on-success="handleArticleSuccess">
                            <img  v-if="siteConfig.articleCover" :src="siteConfig.articleCover" class="article-cover" />
                             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <!-- <el-upload class="avatar-uploader" :headers="authorization" action="/api/admin/site/upload"
                                    :show-file-list="false" accept="image/*" :before-upload="beforeUpload"
                                    :on-success="handleArticleSuccess">
                            <img v-if="siteConfig.articleCover" :src="siteConfig.articleCover" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload> -->
                    </el-form-item>
                    <el-form-item label="邮箱通知">
                        <el-radio-group v-model="siteConfig.emailNotice">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="音乐播放器">
                        <el-radio-group v-model="siteConfig.isMusic">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="网易云歌单Id" v-if="siteConfig.isMusic == 1">
                        <el-input v-model="siteConfig.musicId" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="聊天室">
                        <el-radio-group v-model="siteConfig.isChat">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="websocket链接" v-if="siteConfig.isChat == 1">
                        <el-input v-model="siteConfig.websocketUrl" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleUpdate">保 存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {updateSite, getSiteConfig} from '@/api/site';
import { getToken } from '@/utils/auth';
export default {
  data() {
    return {
      siteConfig: {
        authorAvatar:'',
        userAvatar:'',
        touristAvatar:'',
        siteName: '',
        siteAddress: '',
        siteIntro: '',
        siteNotice: '',
        createSiteTime: '',
        recordNumber: '',
        siteAuthor: '',
        siteAuthor:'',
        aboutMe: '',
        github:'',
        gitee:'',
        bilibili:'',
        douYinCode:'',
        qqCode:'',
        weiXinCode:'',
      },
      socialList: [],
      loginList: [],
      toolList:'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | emoji tip todo-list',
      progressFlag: false, // 是否显示进度条
      uploadPercentage: 0, // 上传进度
      progressFlag2: false, // 是否显示进度条
      uploadPercentage2: 0, // 上传进度
    }
  },
  methods: {
    beforeUpload(file){ // 获取文件大小，单位为字节
      const fileSize = file.size;
      // 允许的文件类型数组
      const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
      // 文件类型不在允许的类型列表中
      if (!allowedTypes.includes(file.type)) {
        this.$message.error('只能上传jpg/png文件');
        return false; // 终止上传
      }
      let commonSize = 1024*1024*5;
      // 文件大小超过5MB
      if (fileSize > commonSize) {
        this.$message.error('文件大小不能超过2MB');
        return false; // 终止上传
      }
      return true; // 允许上传
    },
    handleProgress(event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      // 计算上传进度
      this.uploadPercentage = event.percent
      if(event.percent >= 99)
      {
        this.uploadPercentage = 99
      }
    },
    handleProgress2(event, file, fileList) {
      this.progressFlag2 = true; // 显示进度条
      // 计算上传进度
      this.uploadPercentage2 = event.percent
      if(event.percent >= 99)
      {
        this.uploadPercentage2 = 99
      }
    },
    //作者头像上传成功
    handleAuthorAvatarSuccess(response){
      this.siteConfig.authorAvatar = response.data;
      this.uploadPercentage2 = 100;
      this.progressFlag2 = false;
    },
    //用户头像上传成功
    handleUserAvatarSuccess(response){
      this.siteConfig.userAvatar = response.data;
      this.uploadPercentage = 100;
      this.progressFlag  = false;
    },
    //游客头像上传成功
    handleTouristAvatarSuccess(response){
      this.siteConfig.touristAvatar = response.data;
      this.uploadPercentage2 = 100;
      this.progressFlag2 = false;
    },
    handleTiktokSuccess(response){
        this.siteConfig.douYinCode = response.data;
    },
    handleQQCodeSuccess(response){
        this.siteConfig.qqCode = response.data;
    },
    handleWeiXinCodeSuccess(response){
        console.log(response.data)
        this.siteConfig.weiXinCode = response.data;
    },
    handleUpdate(){
        updateSite(this.siteConfig).then(response => {
            if(response.code == 200){
            this.$message({
                message: '保存成功',
                type: 'success'
            });
            }
        })
    },
    handleArticleSuccess(response){
        this.siteConfig.articleCover = response.data;
    },

    handleUploadImage(){},
    getSite(){
        // 获取网站配置
        getSiteConfig().then(response => {
            this.siteConfig = response.data;
            this.socialList = [];
            this.loginList = [];
            if(this.siteConfig.github != ''){
                this.socialList.push('github');
            }
            if(this.siteConfig.gitee != ''){
                this.socialList.push('gitee');
            }
            if(this.siteConfig.bilibili != ''){
                this.socialList.push('bilibili');
            }
            if(this.siteConfig.qq == 1){
                this.loginList.push('qq');
            }
            if(this.siteConfig.gitee == 1){
                this.loginList.push('gitee');
            }
            if(this.siteConfig.github == 1){
                this.loginList.push('github');
            }
        })
    }
  },
  computed:{
    authorization() {
      const token = getToken()
      return {token}
    },
  },
  mounted() {
    this.getSite();
  },
}
</script>

<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>